<template>
  <div class="wrap">
    <div>
      <el-button type="success" @click="handleEdit('1')">市场部安全员发起</el-button>
      <el-button type="success" @click="handleEdit('2')">商户确认</el-button>
      <el-button type="success" @click="handleEdit('3')">抄送市场部经理确认</el-button>
    </div>
    <!-- <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1">1</el-step>
      <el-step title="步骤 2">2</el-step>
      <el-step title="步骤 3">3</el-step>
    </el-steps>-->
    <div class="tit">市场部流程 ： 安全管理员 ->开具违章处罚单 -> 抄送到商户负责人（安全员） -对方确认后 ->抄送给市场部经理</div>

    <div class="img">
      <img
        src="https://files.axshare.com/gsc/ORNHZ6/c6/94/86/c694868284b84228873eafedd8340dbe/images/违章认定流程（商户）/u1.png?pageId=2cc704d7-e10a-430a-be0d-7564544d30fd"
        alt
      />
    </div>
    <div class="tit">
      违章处罚流程：违章是需要罚款的，流程都要可以配置的。
      第一步：各个部门的安全员，开具违章处罚单，选择违章类型：一般违章等，其他违章，违章描述：需要提供照片或者文字描述。商户直接推送到商户安全负责人。
      第二步，本人签字确认。本人确认结果同步到部门负责人，同时同步人力资源部（报表形式）。个人没确认之前，安全员可以删除。
      表单数据这边负责。被检查人可能有多人。跨月的时间点，给财务以确认时间。
      安全部，生产部，只对本部开流程。
      市场部商户所有的安全隐患对应到商户负责人，但是需要确定违章人的个人信息。
      违章人，本部的填本人，商户的填安全负责人。
    </div>

    <el-dialog
      title="违章整改确认"
      :visible.sync="open"
      width="80%"
      :before-close="handleClose"
      v-if="open"
    >
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>基础信息</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <el-form
          ref="formValidate"
          :model="formValidate"
          label-width="170px"
          :inline="true"
          class="formValidate mt20"
        >
          <el-form-item
            label="检查时间"
            prop="homeName"
            :rules="{ required: true, message: '请输入', trigger: 'blur' }"
          >
            <el-date-picker
              class="hw"
              :disabled="isCreate==2"
              v-model="formValidate.dateRange"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="单位类型"
            prop="homeName"
            :rules="{ required: true, message: '请输入', trigger: 'blur' }"
          >
            <el-select
              class="hw"
              :disabled="isCreate==2"
              v-model="formValidate.status"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_normal_disable"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="受检单位"
            prop="homeName"
            :rules="{ required: true, message: '请输入', trigger: 'blur' }"
          >
            <el-select
              class="hw"
              :disabled="isCreate==2"
              v-model="formValidate.status"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_normal_disable"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="部门"
            prop="homeName"
            :rules="{ required: true, message: '请输入', trigger: 'blur' }"
          >
            <el-select
              class="hw"
              :disabled="isCreate==2"
              v-model="formValidate.status"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_normal_disable"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="工区"
            prop="homeName"
            :rules="{ required: true, message: '请输入', trigger: 'blur' }"
          >
            <el-select
              class="hw"
              :disabled="isCreate==2"
              v-model="formValidate.status"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_normal_disable"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="检查人"
            prop="homeName"
            :rules="{ required: true, message: '请输入', trigger: 'blur' }"
          >
            <el-select
              class="hw"
              :disabled="isCreate==2"
              v-model="formValidate.status"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_normal_disable"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="文件编号"
            prop="homeName"
            :rules="{ required: true, message: '请输入', trigger: 'blur' }"
          >
            <el-input
              class="hw"
              v-model="formValidate.homeName"
              :disabled="isCreate==2"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
          <el-form-item
            label="检查部门"
            prop="homeName"
            :rules="{ required: true, message: '请输入', trigger: 'blur' }"
          >
            <el-select
              class="hw"
              :disabled="isCreate==2"
              v-model="formValidate.status"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_normal_disable"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="登记部门"
            prop="homeName"
            :rules="{ required: true, message: '请输入', trigger: 'blur' }"
          >
            <el-select
              class="hw"
              :disabled="isCreate==2"
              v-model="formValidate.status"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_normal_disable"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="type==3"
            label="商户已确认"
            prop="homeName"
            :rules="{ required: true, message: '请输入', trigger: 'blur' }"
          >
            <el-radio disabled v-model="radio" label="0">已确认</el-radio>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>违章明细</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <el-button type="primary" @click="lookImg" :disabled="single">查看图片</el-button>
        <el-table
          ref="table"
          @row-click="childrenData"
          v-loading="loading"
          :data="userList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="违章人" align="center" />
          <el-table-column label="违章类别" align="center" prop="dictId" />
          <el-table-column
            label="违章描述"
            align="center"
            prop="dictName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="违章处理"
            align="center"
            prop="dictName"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            label="处罚金额"
            align="center"
            prop="dictName"
            :show-overflow-tooltip="true"
          />

          <el-table-column label="备注" align="center" prop="dictName" :show-overflow-tooltip="true" />
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-card>
      <el-dialog title="查看照片" :visible.sync="lookImgPop" width="60%" append-to-body>
        <lookImg type="2" @close="lookImgPop=false"></lookImg>
      </el-dialog>
      <div class="bt" style="text-align: center;" v-if="type==1">
        <el-button
          style="width:100px"
          type="primary"
          @click="submitForm('formValidate')"
          v-if="isCreate!=2"
        >提交</el-button>
        <el-button style="width:100px" @click="handleClose">取消</el-button>
      </div>
      <div class="bt" style="text-align: center;" v-if="type==2||type==3">
        <el-button style="width:100px" type="primary" @click="submitForm('formValidate')">确认</el-button>
        <el-button style="width:100px" @click="handleClose">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import lookImg from "./com/img.vue";
import {
  listUser,
  getUser,
  delUser,
  addUser,
  updateUser,
  resetUserPwd,
  changeUserStatus,
  deptTreeSelect
} from "@/api/system/user";
export default {
  components: {
    lookImg
  },
  dicts: ["sys_normal_disable"],
  data() {
    return {
      radio: "0",
      single: true,
      lookImgPop: false,
      total: 0,
      userList: [],
      loading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      open: false,
      formValidate: {},
      isCreate: 0
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    lookImg() {
      this.lookImgPop = true;
    },
    childrenData(e) {
      console.log(e, "www");
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
        response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    submitForm() {
      console.log(this.formValidate, "这是什么呀?");
      return;
      if (this.isCreate === 0) {
        //新增
        this.$refs.formValidate.validate(valid => {
          this.formValidate.medalId = this.formValidate.medalId.toString();
          console.log(this.formValidate, "this.formValidatethis.formValidate");
          if (valid) {
            homeGetAdd(this.formValidate).then(res => {
              this.$message.success("提交成功");
              this.$emit("getList");
              this.$emit("close");
            });
          }
        });
      }

      if (this.isCreate === 1) {
        //编辑
        this.formValidate.medalId = this.formValidate.medalId.toString();
        console.log(this.formValidate, "2this.formValidatethis.formValidate");
        this.$refs.formValidate.validate(valid => {
          if (valid) {
            homeGetEdit(this.formValidate).then(res => {
              this.$message.success("提交成功");
              this.$emit("getList");
              this.$emit("close");
            });
          }
        });
      }
    },
    handleEdit(type) {
      if (type == 1) {
        this.isCreate = 0;
      } else {
        this.isCreate = 2;
      }
      this.type = type;
      this.open = true;
    },
    handleClose() {
      if (this.type == 1) {
        this.open = false;
      } else {
        console.log("做个啥事在关闭");
        this.open = false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.hw {
  width: 280px;
}
.wrap {
  width: 80%;
  margin: 0 auto;

  .tit {
    width: 20%;
    margin: 30px auto;
  }
  .img {
    text-align: center;
  }
}
</style>